<script setup lang='ts' name="personnel-organizational-tree">
import { ElButton, ElCard, ElInput, ElTree } from 'element-plus'
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
type Trees = {
    children?: Tree[]
    label: string
}

function handleNodeClick(data: Trees) {
    console.log(data)
}

const data: Trees[] = [
    {
        children: [
            {
                children: [
                    {
                        children: [
                            {
                                // id: 5,
                                label: '业务部门',

                            },
                            {
                                // id: 6,
                                label: '财务部门',
                            },
                        ],
                        // id: 4,
                        label: '安居置业',
                    },
                    {
                        // id: 7,
                        label: '安居租赁',
                    },
                ],
                // id: 2,
                label: '安居集团',
            },
            {
                children: [
                    {
                        // id: 8,
                        label: '业务部门',
                    },
                    {
                        // id: 9,
                        label: '财务部门',
                    },
                ],
                // id: 3,
                label: '都保公司',
            },
        ],
        // id: 1,
        label: '安居链',
    },
]

const defaultProps = {
    children: 'children',
    label: 'label',
}
type Tree = {
    [key: string]: any
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
function filterNode(value: string, data: Trees) {
    if (!value)
        return true
    return data.label.includes(value)
}
watch(filterText, (val) => {
    treeRef.value!.filter(val)
})
function createSection() {
    // createSectionShow.value=true
    // showTreeLeft.value=false
    // addDialog.value = true
    console.log('点击了新增部门')
    router.push('/admin/organizational/addSection')
}
</script>

<template>
    <ElCard style="width:20%">
        <div flex>
            <ElInput v-model="filterText" />

            <ElButton ml-6
                      class="el-button el-button--primary el-button--default"
                      @click="createSection"
            >
                新增部门
            </ElButton>
        </div>

        <ElTree ref="treeRef"
                style="max-width: 600px"
                :data="data"
                :props="defaultProps"
                :filter-node-method="filterNode"
                @node-click="handleNodeClick"
        />
    </ElCard>
</template>

    <style lang="scss" scoped>
    .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>
